<template>
  <div class="body">
    <div class="w100 h-60 pl-30 pr-30 rowsb rowsm mb-110" style="background-color: #E33636;">
      <div class="rows rowsm">
        <img src="../../static/img/login.png" class="w-20 h-20 mr-10" alt="">
        <div class="fs-18 colfff">学生登录</div>
      </div>
        <router-link to="/"> 
          <div class="rows rowsm">
          <img src="../../static/img/icon_fh-1.png" class="w-20 h-20 mr-10" alt="">
          <div class="fs-18 colfff">返回首页</div>
          </div>
      </router-link>
      
    </div>

    <div class="w100 pl-208 pr-208 mb-131">
      <div class="w100 h-427 br-20 bgff  rowsm pl-46 pr-30">
        <div class="rowscl rowsm warp" >
          <div class="fs-28 col333 fw-b mb-18">学生登录</div>
          <div class="w-482 h-57 br-20 pl-24 pr-24 rows rowsm" style="background-color: #F0F0F0;">
            <div class="fs-20 col333 mr-90" style="white-space: nowrap;">学号</div>
            <el-input v-model="userName" class="input" placeholder="请输入您的学号"></el-input>
            <!-- <el-input placeholder="请输入密码" v-model="input" show-password></el-input> -->
          </div>

          <div class="w-482 h-57 br-20 pl-24 pr-24 rows rowsm mt-30 mb-20" style="background-color: #F0F0F0;">
            <div class="fs-20 col333 mr-90" style="white-space: nowrap;">密码</div>
            <el-input placeholder="请输入密码" class="input" v-model="password" show-password></el-input>
          </div>

          <!-- <div class="rows rowsm w100 mb-24">
            <img src="../../static/img/icon_gx.png" class="w-18 h-18 mr-10" alt="">
            <div class="fs-28 col888">下次自动登录</div>
          </div> -->

          <div class="w-306 h-55 br-43 rowsc rowsm colfff fs-24 fw-b mb-24" style="background-color: #E33636; cursor: pointer;" @click="login()">登录</div>

          <div class="rows rowsm">
            <!-- <img src="../../static/img/icon_gx.png" class="w-18 h-18 mr-9" alt=""> -->
             <el-checkbox v-model="checked"  class="w-20 h-20 mr-9 checkbox"></el-checkbox>
            <div class="fs-15 col888">登录即表示同意平台 <span style="color: #E33636; cursor: pointer;" @click="toAgreement('1')">《隐私政策》</span> 和 <span style="color: #E33636; cursor: pointer;" @click="toAgreement('2')">《用户协议》</span> </div>
          </div>
        </div>

        <!-- <div class="rowscl rowsm">
          <img src="../../static/img/icon_kf.png" class="w-200 h-200 mb-31" alt="">
          <div class="fs-16 col333">请使用临沂大学劳动教育数字管理平台小程序扫码登录</div>
        </div> -->
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  components: {},
  props: {},
  data() {
    return {
      userName:'',
      password:'',
      checked: true
    };
  },
  watch: {},
  computed: {},
  methods: {
    login(){
      if(this.checked == false) return this.$message.warning('请勾选同意协议');
      this.$axios.post('login/login',{stNumber:this.userName,password:this.password}).then(res => {
        if(res.data.code != 200) return this.$notify({
          title: '提示',
          message: res.data.msg
        });

        let {data:{token}} = res.data

        sessionStorage.setItem('token',token)
        // axios.defaults.headers.post['token'] = localStorage.getItem('token')
        axios.defaults.headers.post['token'] = sessionStorage.getItem("token")




        this.$router.push('/loginIndex')

      })
      // localStorage.setItem('token','1111')
    },
    toAgreement(val){
      this.$router.push(`/agreement?type=${val}`)
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.body {
  background: #F2F2F2;
  width: 100%;
}
.input /deep/ .el-input__inner  {
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 20px;
}
.checkbox{
  
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{

  border-color: #E33636 !important;
  background-color: #E33636 !important;
  border-radius: 50% !important;
}
/deep/ .el-checkbox__input.is-focus .el-checkbox__inner{
  border-color:#E33636;
   border-radius: 50% !important;
}
/deep/ .el-checkbox__inner{
   border-radius: 50% !important;
   border: 1px solid #E33636;
}
.warp{
  padding-top: 40px !important;
}
</style>